آموزش تسلط بر طراحی وب و موبایل - فیگما، اصول UI/UX و فراتر از آن [ویدئویی] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه: تسلط بر طراحی وب و موبایل: فیگما، ضروریات UI/UX و بیشتر Introduction: Master Web & Mobile Design: Figma, UI/UX Essentials, +More

• از صفر تا قهرمان فیگما: راهنمای گام به گام شما From Zero to Figma Hero: Your Step-by-Step Guide

• از فیگما تا کد: طراحی رابط‌های خیره‌کننده بدون نوشتن یک خط کد Figma to Code Design Stunning Interfaces Without Writing a Line

• تفاوت UI و UX در طراحی فیگما: توضیح جادوی طراحی UI vs. UX in Figma Design Magic Explained

• ساخت اپلیکیشن‌ها و وب‌سایت‌هایی که عاشقشان می‌شوید (در این دوره فیگما) Build Apps & Websites You'll Love (In This Figma Course)

• یادگیری بریف‌های UX و جریان‌های کاری (Task Flows) در فیگما Learn UX Briefs & Task Flows in Figma

وایرفریمینگ: مبانی و بهترین روش‌ها Wireframing: Fundamentals and Best Practices

• مقایسه وایرفریم‌های Lo-Fi و Hi-Fi: نبرد طراحی Lo-Fi vs Hi-Fi Wireframes Design Showdown

• فریم‌ها و فایل طراحی در فیگما (رابط کاربری) Frames & Design File in Figma Design (Interface)

تسلط بر تایپوگرافی، رنگ و آیکون‌ها Mastering Typography, Color, and Icons

• ابزار متن و فونت‌ها در فیگما Figma Text Tool and Fonts

• مبانی فیگما: نحوه ایجاد و تغییر اشکال Figma Basics How To CREATE And MODIFY SHAPES

• چگونه رنگ‌ها را در فیگما انتخاب و استفاده کنیم How to Choose and use Colors in Figma

• استروک‌ها و به‌روزرسانی ویژگی‌های پیش‌فرض در فیگما Strokes & Updating Default Properties in Figma

• حالت ویرایش آبجکت چیست و چگونه از آن استفاده کنیم! What is Object Editing Mode & How to Use It! In Figma

• نحوه استفاده از ابزار Scale و Selection در فیگما How to Use The Scale Tool And Selection in Figma

• گروه‌ها و فریم‌های فیگما برای طراحی‌های بهتر UI Figma Groups and Frames for Better UI Designs

• پروژه 1: از اسکچ تا واقعیت: وایرفریمینگ طراحی شما در فیگما Project 1: From Sketch to Reality: Wireframing Your Design in Figma

• بهترین مجموعه‌های آیکون رایگان برای طراحان UI/UX Best Free Icon Set Packs for UI/UX Designers

• مبانی آیکون‌ها در فیگما Icon Basics In Figma

• نحوه نصب و استفاده از پلاگین‌ها در فیگما How To Install And Use Plugins in Figma

• پروژه 2: تسلط بر جعبه‌ابزار: آیکون‌ها و پلاگین‌ها برای طراحی‌های قدرتمند Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs

ایجاد صفحات در فیگما Creating Pages in Figma

• نحوه ایجاد و استفاده از صفحات در فایل فیگما How To Create And Use Pages In Your Figma File

مقدمه‌ای بر پروتوتایپینگ در فیگما: راهنمای مبتدیان Introduction to Prototyping in Figma: A Beginner's Guide

• پروتوتایپینگ فیگما برای مبتدیان Figma Prototyping for Beginners

• پروتوتایپینگ و انتقال‌ها (Easing) در فیگما Figma Prototyping & Transitions (Easing)

• تست پروتوتایپ با استفاده از Figma Mirror Figma Testing Prototype with Figma Mirror

• پروژه 3: جادوی طراحی موبایل: نمایش اپلیکیشن شما در فیگما Project 3: Mobile Design Magic: Showcase Your App in Figma

مبانی انیمیشن در فیگما Figma Animation Basics

• آموزش Smart Animate فیگما برای مبتدیان Figma Smart Animate for Beginners

• پروژه 4: بخشیدن روح به طراحی: ایجاد انیمیشن‌های هوشمند در فیگما Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma

همکاری با دیگران: اشتراک‌گذاری، کامنت‌گذاری و ویرایش در فیگما Collaborate with Others: Sharing, Commenting, and Editing in Figma

• اشتراک‌گذاری و دریافت بازخورد در لحظه با فیگما Sharing & Feedback in Real-Time with Figma

• همکاری همزمان با قابلیت Multiplayer در فیگما Figma Collaborate in Real-Time with Multiplayer

راهنمای جامع ایجاد مودبورد (Moodboard) در فیگما The Ultimate Guide to Creating Moodboards in Figma

• مودبورد چیست و راز یافتن الهام برای طراحی وب و اپلیکیشن What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design

• نحوه ایجاد یک مودبورد در فیگما How To Create A Mood Board In Figma

• پروژه 5: ایستگاه الهام: ساخت یک مودبورد در فیگما Project 5: Inspiration Station: Building a Moodboard in Figma

تسلط بر ستون‌ها و گریدها در فیگما Mastering Columns & Grids in Figma

• ایجاد یک سیستم گرید ریسپانسیو برای طراحی وب و UI Create a Responsive Grid System for Web & UI Design

راهنمای جامع استفاده از رنگ‌ها در فیگما The Ultimate Guide to Using Colors in Figma

• چگونه رنگ‌ها را انتخاب کنیم (الهام رنگی) How to Choose Colors (Color Inspiration)

• من چگونه پالت‌های رنگی UI را در فیگما می‌سازم How I Make UI Color Palettes In Figma

• نحوه ایجاد گرادینت‌ها در فیگما How To Create Gradients in Figma

• ایجاد یک سیستم رنگی در فیگما Creating a Color System in Figma

• ساده‌ترین راه تولید پالت رنگی در فیگما (با استفاده از پلاگین‌ها) Easiest Way to Generate Color Palette in Figma (Using Plugins)

• پروژه 6: رنگ‌ها، استایل‌ها و گریدها در عمل! Project 6: Colors, Styles, and Grids in Action!

تسلط بر متن و فونت‌ها در فیگما Mastering Text and Fonts in Figma

• بهترین روش‌ها برای انتخاب فونت و جفت‌سازی فونت‌ها در طراحی UI و وب Best Practices for Choosing Fonts and Font Pairing in UI and Web Design

• ایجاد مقیاس تایپوگرافی ایده‌آل برای پروژه‌های UI و وب Create the Perfect Typography Scale for UI & Web Projects

• سریع‌ترین راه برای ایجاد استایل‌های متنی در فیگما Fastest Way to Create Text Styles in Figma

• نحوه افزودن متن Lorem Ipsum در فیگما How to Add Lorem Ipsum Text in Figma

• نکات و ترفندهای کاربردی متن در فیگما Useful Text Tips & Tricks in Figma

• نحوه افزودن فونت‌ها و رفع مشکل فونت‌های گم شده در فیگما How to Add Fonts in Figma and How To Add Missing Fonts in Figma

• پروژه 7: تخصص متن: تسلط بر استایل‌های متنی در فیگما Project 7: Textpertise: Mastering Text Styles in Figma

ابزارهای ترسیم فیگما Figma's Drawing Tools

• مبانی ابزار Pen و شبکه‌های Vector در فیگما Figma Pen Tool Basics & Vector Networks

• چرا آیکون‌های اپل متفاوت هستند (Corner Smoothing) Why Are the Apple Icons Different (Corner Smoothing)

ضروریات فیگما: کار با عملیات Boolean Figma Essentials: Working with Boolean Operations

• عملیات Boolean در فیگما (Union, Subtract, Intersect, Exclude) Figma Boolean Operations (Union, Subtract, Intersect, Exclude)

• دوپسر قدرتمند فیگما: چه زمانی از Union و چه زمانی از Flatten استفاده کنیم Figma's Power Duo: When to Use Union and When to Flatten

• پروژه 8: طراحی صفحه اصلی و منوی همبرگری در فیگما Project 08: Homepage & Burger Menu Design in Figma

• نحوه استفاده از Smart Selection و Tidy Up در فیگما How to Use Smart Selection and Tidy Up in Figma

ضروریات فیگما: کار با تصاویر و دارایی‌ها (Assets) Figma Essentials: Working with Images and Assets

• قرار دادن تصاویر در فیگما Placing Images in Figma

• ماسک‌های فیگما (ماسک کردن تصویر و متن) Figma Masks (Mask Image and Text in Figma)

• پلاگین‌های تصاویر فیگما برای طراحان UI/UX Figma Images Plugins for UI/UX Designers

• پروژه 9: کیمیای تصویر: تسلط بر تصاویر و پلاگین‌ها در فیگما Project 9: Image Alchemy: Mastering Images & Plugins in Figma

ضروریات فیگما: تسلط بر Auto Layout و Constraints Figma Essentials: Mastering Auto Layout and Constraints

• Auto Layout و Constraints در فیگما Auto Layout And Constraints in Figma

• فاصله بین آبجکت‌ها در Auto Layout فیگما Figma Auto Layout Space Between Objects

• ساده‌سازی Constraints و تغییر سایز در فیگما Figma Constraints & Resizing Made SIMPLE

• تودرتو کردن فریم‌ها، Auto Layout و Constraints در فیگما Nest Frames, Auto Layout And Constraints in Figma

• تکنیک‌های پیشرفته Auto Layout در فیگما Advanced Auto Layout Techniques - Figma

• پروژه 10: طراحی تطبیقی: ایجاد چیدمان‌های ریسپانسیو در فیگما Project 10: Design That Adapts: Creating Responsive Layouts in Figma

ضروریات فیگما: کار با افکت‌ها Figma Essentials: Working with Effects

• نحوه ایجاد سایه‌های زیبا در طراحی UI با فیگما How to Make Beautiful Shadows - UI Design with Figma

• نحوه ایجاد Background Blur و Layer Blur در فیگما How to Create Background Blur and Layer Blur in Figma

• پروژه 11: افزودن سایه‌ها، بلورها و دکمه‌های نرم! Project 11: Let's Add Shadows, Blurs, and Squishy Buttons!

ضروریات فیگما: درک ذخیره‌سازی و تاریخچه نسخه‌ها Figma Essentials: Understanding Saving and Version History

• نحوه ذخیره فایل‌های فیگما در دسکتاپ و دسترسی به تاریخچه فایل How To Save Your Figma Files To Desktop and How To Access Figma File's History

ضروریات فیگما: درک کامپوننت‌ها و ایجاد نمونه‌ها (Instances) Figma Essentials: Understanding Components and Creating Instances

• کامپوننت‌های فیگما: مبانی Figma Components - The Basics

• به‌روزرسانی، تغییر، ویرایش و ریست کردن کامپوننت‌ها در فیگما Update, Change, Edit, and Reset Components In Figma

• حذف کامپوننت‌های اصلی در فیگما غیرممکن است (نکات و ترفندهای کامپوننت‌ها) Deleting Main Components in Figma is Impossible (Tips & Tricks of Components)

• جابجایی کامپوننت‌های اصلی و نحوه سازماندهی آن‌ها Moving Main Components and How to Organize Your Components

• بهترین روش‌های فیگما: نام‌گذاری لایه‌ها و منظم ماندن Figma Best Practices: Name Layers & Stay Organized

• پروژه 12: بلوک‌های سازنده: تسلط بر کامپوننت‌ها در فیگما Project 12: Building Blocks: Mastering Components in Figma

ضروریات فیگما: بررسی قدرت Variantها Figma Essentials: Exploring the Power of Variants

• کامپوننت‌ها و Variantها در فیگما برای مبتدیان Figma Components and Variants for Beginners

• ویژگی‌های کامپوننت (Component Properties) در فیگما Figma Component Properties

• پروژه 13: قدرت Variant: تقویت طراحی شما با استفاده از Variantها Project 13: Variant Power: Supercharge Your Design with Variants

ضروریات فیگما: تسلط بر طراحی و عملکرد فرم‌های ورودی Figma Essentials: Mastering Input Form Design and Functionality

• نحوه طراحی یک فیلد ورودی تعاملی در فیگما How to Design an Interactive Input Field in Figma

• پروژه 14: تسلط بر حساب کاربری و دسته‌بندی: طراحی برای جریان کاربر در فیگما Project 14: Account & Category Mastery: Designing for User Flow in Figma

• نحوه طراحی رابط کاربری اعلان‌ها (Notification) در فیگما How to Design a Notification UI Design in Figma

تکنیک‌های پیشرفته پروتوتایپینگ در فیگما Advanced Prototyping Techniques in Figma

• نحوه افزودن اورلی‌های پاپ‌آپ در فیگما How to Add Popup Overlays in Figma

• نحوه ایجاد کامپوننت TOOLTIP (نمایش متن هنگام هاور) در فیگما How to Create a TOOLTIP (Hover to Show Text) Component in Figma

• نحوه ایجاد چندین پروتوتایپ و جریان‌های مجزا در یک صفحه فیگما How to Create Multiple Prototypes & Create Separate Flows on One Figma Page

• انتقال‌های اورلی در پروتوتایپینگ فیگما Prototyping Overlay Transitions in Figma

• پروژه 15: پاپ‌آپ و جریان حرفه‌ای: پروتوتایپینگ تعاملات در فیگما Project 15: Pop Up & Flow Like a Pro: Prototyping Interactions in Figma

• اسکرول چسبنده (Sticky Scroll) در فیگما Sticky Scroll in Figma

• نحوه ایجاد انیمیشن اسکرول خودکار در فیگما How to Create Auto Scrolling Animation in Figma

ضروریات فیگما: کار با تیم‌ها و مدیریت پروژه Figma Essentials: Working with Teams and Project Management

• تفاوت بین تیم‌ها، پروژه‌ها و صفحات The Difference Between Teams, Projects and Pages

ضروریات فیگما: درک و استفاده از کتابخانه‌ها Figma Essentials: Understanding and Using Libraries

• ایجاد یک کتابخانه تیمی قابل اشتراک‌گذاری در فیگما Figma Create a Shareable Team Library

انیمیشن و میکرو-تعاملات در فیگما Animation and Micro Interactions in Figma

• تفاوت انیمیشن و میکرو-تعامل در فیگما Animation vs Micro Interaction in Figma

• انیمیشن‌های شگفت‌انگیز دکمه در فیگما Amazing Button Animations in Figma

• پروژه 16: انیمیشن دکمه افزودن به سبد خرید Project 16: Add To Cart Button Animation

• پروژه 17: حالت تاریک (Dark Mode) و حالت روشن Project 17: Dark Mode and Light Mode

• پروژه 18: کمال در ابعاد کوچک: طراحی صفحه محصول و سبد خرید آیفون Project 18: Pocket-Sized Perfection: Design an iPhone Product Page & Cart

• میکرو-انیمیشن‌ها با استفاده از کامپوننت‌های تعاملی در فیگما Micro Animations Using Interactive Components in Figma

• تنظیمات Easing و انیمیشن‌های Spring در پروتوتایپ فیگما Figma Prototype Easing & Spring Animations

• انیمیشن ضربان (Pulsing) در فیگما Pulsing Animation in Figma

• پروژه 19: کلیک نهایی: تکمیل طراحی اپلیکیشن Clickkart در فیگما Project 19: The Final Click: Finishing Your Clickkart App Design in Figma

تامنیل‌های فیگما Figma Thumbnails

• چگونه برای یک پروژه در فیگما تامنیل یا کاور تنظیم کنم How Do I Set a Project Thumbnail or Cover in Figma

تسلط بر خروجی گرفتن در فیگما: راهنمای گام به گام Master Figma Export: A Step-by-Step Guide

• نحوه خروجی گرفتن از طراحی فیگما به صورت تصویر (PNG, JPG, SVG, PDF) How to Export Your Figma Design as Image (PNG, JPG, SVG, PDF)

• نحوه تحویل حرفه‌ای طرح‌های UX (Hand-off) How to Hand Off Your UX Designs Like a Pro

• مقدمه‌ای بر سیستم‌های طراحی، منابع و الهامات Introduction to Design Systems, Resources, and Inspirations

رمزگشایی از ذهن کاربر: روانشناسی پشت طراحی موثر UI/UX Decoding User Minds: The Psychology Behind Effective UI/UX Design

• ۱۰ اصل روانشناختی برای طراحی UX قدرتمند 10 Psychological Principles for Powerful UX Design

• بهره‌گیری از روانشناسی برای تجربه‌های کاربر شخصی‌سازی شده: یک مطالعه موردی Leveraging Psychology for Personalized User Experiences: A Case Study

• روانشناسی رنگ‌ها در طراحی UI/UX Color Psychology in UI/UX Design

• پارادوکس شادی: درک سازگاری لذت‌جویانه در طراحی UI/UX The Happiness Paradox: Understanding Hedonic Adaptation in UI/UX Design

• اثر دوپامین در طراحی UI/UX The Dopamine Effect in UI/UX Design

• قدرت صدا: چگونه صدا روانشناسی تجربه کاربری (UX) را شکل می‌دهد The Power of Sound: How Audio Shapes User Experience (UX) Psychology

ساخت پروژه‌های واقعی UI/UX Let's Build Real World UI/UX Projects

• مقدمه: پروژه‌های دنیای واقعی با فیگما Intro - Real World Projects With Figma

• پروژه واقعی UI/UX شماره ۲: StayWave Real World UI/UX Project 2: StayWave

• پروژه واقعی UI/UX شماره ۳: اپلیکیشن سفارش غذا Real World UI/UX Project 3: Food Delivery App

• پروژه واقعی UI/UX شماره ۴: اپلیکیشن موسیقی Real World UI/UX Project 4: Music App

• پروژه واقعی UI/UX شماره ۵: DIY Real World UI/UX Project 5: DIY

گام‌های بعدی و سپاسگزاری: مسیر یادگیری فیگما شما Next Steps and Thank You: Your Figma Learning Path

• فیگما برای طراحی UI/UX: شما فارغ‌التحصیل شدید! (گام بعدی چیست) Figma for UI/UX Design: You've Graduated! (What's Next)